<template>
    <div class="container">
            <div class="handle-box">
              <el-button type="primary" @click="AddFormaltrainees"  style="padding: 9px 15px;font-size: 12px;float: left">添加正式学员</el-button>
            </div>
            <el-table :data="data" id="out-table"  border style="width: 100%">
                <el-table-column prop="studentId" label="ID"></el-table-column>
                <el-table-column prop="studentName" label="姓名"></el-table-column>
                <el-table-column prop="phone" label="手机号"></el-table-column>
                <el-table-column prop="teachClassName" label="班级"></el-table-column>
                <el-table-column prop="goodsName" label="购课套餐"></el-table-column>
                <el-table-column prop="" label="消耗课时">
                  <template slot-scope="scope">
                    <span>{{scope.row.usePeriods}}</span> / <span>{{scope.row.totalPeriods}}</span>
                  </template> 
                </el-table-column> 
                <el-table-column prop="organizationUserName" label="课程顾问"></el-table-column> 
                <el-table-column prop="correctionTime" label="转正时间"></el-table-column>
                <el-table-column fixed="right" label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="PersonnelSee(scope.$index, scope.row)">编辑</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="pagination">
                <el-pagination @current-change="handleCurrentChange"
                              layout="prev, pager, next"
                              :total="pageData">
                </el-pagination>
            </div>
        </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      pageData: undefined,
      fengye: 1,
      delVisible: false,
      name: "",
      organizationUserId: "",
      roleNames: "",
      phone: "",
      status: "",
      totalPeriods:""
    };
  },
  created() {
    this.getData();
  },
  computed: {
    data() {
      return this.tableData.filter(d => {
        return d;
      });
    }
  },
  methods: {
    // 分页导航
    handleCurrentChange(val) {
      this.fengye = val;
      this.getData();
    },
    // 获取后台数据
    getData() {
      var that = this;
      let organizationId = JSON.parse(localStorage.getItem("organizationIds"))[0];
      this.url = "/api/user/xzs/student.list.get";
      this.$axios({
        url: this.url,
        method: "post",
        data: {
          organizationId:organizationId,
          type:'1',
          pageNum: that.fengye,
          pageSize: "10",

        },
        transformRequest: [
          function(data) {
            let ret = "";
            for (let it in data) {
              ret += encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
            }
            return ret;
          }
        ],
      }).then( res => {
          this.$store.state.a=res.data.data.pageList;
          this.tableData = res.data.data.pageList;
          console.log(this.tableData);
          
          this.pageData = res.data.data.total;
          this.tableData.map(function (item) {
              item.correctionTime=that.timestampToTime(item.correctionTime);
          });
        }).catch(err=>{
          console.log(err);
        })
    },
    //学员管理点击添加学员
    AddFormaltrainees() {
      this.$router.push({ path: "/home/AddFormaltrainees", params: { id: "1" } });
    },
    //时间戳转换
    timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        var D = date.getDate() + ' ';
        var h = date.getHours() + ':';
        var m = String(date.getMinutes()).padStart(2, "0");
        return Y + M + D ;
    },
    //学员管理点击编辑方法
    PersonnelSee(index, row) {
      this.$router.push({
        path: "/home/AddFormaltrainees?studentId=" + row.studentId
      });
    }
  }
};
</script>
<style>
.box {
  padding: 20px;
  background: white;  
}
.handle-box {
  margin-bottom: 20px;
  padding-top: 20px;
  padding-left: 10px;
  height: 50px;
  margin-top: -20px;
  border-radius: 5px;
  background: #f4fafa;
}
.handle-input {
  width: 235px;
  display: inline-block;
}
</style>
  